<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">

<head>
    <title>合同详情</title>
    <meta charset="UTF-8">
    <script th:src="@{static/js/vue.js}"></script>
    <script th:src="@{static/js/elementUI.js}"></script>
    <script th:src="@{static/js/axios.js}"></script>
    <link th:href="@{static/css/elementUI.css}" rel="stylesheet" />
    <style>
        /**/
        .text {
            font-size: 15px;
        }

        .item {
            margin-bottom: 5px;
        }
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 100%;
        }
        #main{
            width: 80%;
            margin: auto;
            margin-top: 10px;
        }
        #dataTable{
            margin-top: 10px;
        }
        #form{
            line-height: 60px;
        }
        #top{
            /*height: 100px;*/
            /*overflow: hidden;*/
        }
        div{
            /*border: 1px red solid;*/
        }
        #h1{
            height: 200px;

        }
        el-table th{
            text-align: center;
        }
        .text2 {
            font-size: 16px;
            float: left;
            padding: 20px 25px;
        }
        .box-card1 {
            height:150px;
            width: 220px;
        }
        #c1{
            padding-left: 0;
        }
        #t11{
            background-color:#66b1ff;
            border-radius: 15px;
        }
        #t22{
            background-color:orange;
            border-radius: 15px;
        }
        #t33{
            background-color:#b3d8ff;
            border-radius: 15px;
        }
        #t44{
            background-color:coral;
            border-radius: 15px;
        }
        .demo-input-suffix{
            float: left;
            height: 80px;
            width: 176px;
        }
        .el-dialog{
            width: 500px;
        }
    </style>
</head>

<body>
<div id="top">
    <el-card class="box-card" style="background-color: #EBEEF5">
        <span style="margin-left: 9%;margin-top: 5px;background-color: #3a8ee6;font-size: 15px">&nbsp;&nbsp;</span>
        <span style="font-size: 15px;margin-left: 10px">合同列表</span>
        <el-button style="float: right; padding: 3px 0;margin-right: 10%" type="text">刷新</el-button>
    </el-card>
</div>
<div id="main">
    <div id="h1">
        <div  class="text2" id="c1">
            <el-card class="box-card1" id="t11">
                今日合同数
                <br>
                {{num}}
            </el-card>
        </div>
        <div  class="text2">
            <el-card class="box-card1" id="t22">
                近7日合同数
                <br>
                {{nums7}}
            </el-card>
        </div>
        <div  class="text2">
            <el-card class="box-card1" id="t33">
                近30日合同数
                <br>
                {{nums30}}
            </el-card>
        </div>
        <div  class="text2">
            <el-card class="box-card1" id="t44">
                总合同数
                <br>
                {{numsAll}}
            </el-card>
        </div>
    </div>

    <div id="form">
        <el-card class="box-card">
            <div slot="header" class="clearfix" style="height: 20px;line-height: 20px">
                <span style="font-size: 15px">查询条件</span>
                <!-- Form -->
                <el-button style="float: right; padding: 3px 0 ;width: 70px;height: 30px"
                           type="primary" plain @click=search1>
                    高级检索
                </el-button>
                <div id="ss1" class="el-dialog">
                    <el-dialog title="高级检索" :visible.sync="dialogFormVisible">
                        <el-form :model="form">
                            <el-form-item label="合同ID：" :label-width="formLabelWidth">
                                <el-input v-model="form.id" autocomplete="off" placeholder="合同ID"
                                          style="width: 215px;"></el-input>
                            </el-form-item>
                            <el-form-item label="合同名称：" :label-width="formLabelWidth">
                                <el-input v-model="form.name" autocomplete="off" placeholder="合同名称"
                                          style="width: 215px;"></el-input>
                            </el-form-item>
                            <el-form-item label="合同状态：" :label-width="formLabelWidth">
                                <el-select v-model="form.status" placeholder="全部">
                                    <el-option label="待付款" value="0"></el-option>
                                    <el-option label="待发货" value="1"></el-option>
                                    <el-option label="已发货" value="2"></el-option>
                                    <el-option label="已完成" value="3"></el-option>
                                    <el-option label="已关闭" value="4"></el-option>
                                    <el-option label="无效订单" value="5"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="合同来源：" :label-width="formLabelWidth">
                                <el-select v-model="form.from" placeholder="全部">
                                    <el-option label="正常订单" value="zc"></el-option>
                                    <el-option label="秒杀订单" value="ms"></el-option>
                                </el-select>
                            </el-form-item>
                            <template>
                                <el-form-item label="提交时间：" style="margin-left: 20px">
                                    <div class="block" id="t2" style="margin-top: 15px">
                                        <span class="demonstration"></span>
                                        <el-date-picker
                                                v-model="form.tkTime"
                                                type="date"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>
                            </template>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click=contract_search1>确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
            </div>

            <div align="left">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="合同编号：" style="margin-left: 20px">
                        <el-input v-model="formInline.contractNo" placeholder="合同编号" style="margin-top: 15px"></el-input>
                    </el-form-item>
                    <el-form-item label="发起人：" style="margin-left: 20px">
                        <el-input v-model="formInline.userName" placeholder="发起人姓名/手机号码" style="margin-top: 15px"></el-input>
                    </el-form-item>
                    <template>
                        <el-form-item label="提交时间：" style="margin-left: 20px">
                            <div class="block" id="t1" style="margin-top: 15px">
                                <span class="demonstration"></span>
                                <el-date-picker
                                        v-model="formInline.time"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </div>
                        </el-form-item>
                    </template>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" style="margin-top: 15px">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
    <div id="dataTable">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-size: 15px">合同列表</span>
                <el-button style="float: right; padding: 3px 0 ;width: 70px;height: 30px" type="primary" plain>导出数据</el-button>
            </div>
            <template>
                <!--  给表格绑定数据，tableData即为后端传过来的数据  -->
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%;text-align: center">
                    <!--  用porp给这一列绑定 tableData中对应的属性 ，type=selection表示这一列是复选框 -->
                    <el-table-column
                            prop="id"
                            type="selection"
                            width="50">
                    </el-table-column>
                    <!--  label="编号"表示这一列的表头是“编号”,width代表这一列宽度 -->
                    <el-table-column
                            prop="orderBean.id"
                            label="合同ID"
                            width="240">
                    </el-table-column>
                    <el-table-column
                            prop="contractNo"
                            label="合同编号"
                            width="240">
                    </el-table-column>
                    <el-table-column
                            prop="contractName"
                            label="合同名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="userBean.userInfoBean1.telphone"
                            label="发起人手机号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="completTime"
                            label="完成时间"
                            width="180"
                            type="date"
                            value-format='yyyy-MM-dd'>
                    </el-table-column>
                    <el-table-column
                            prop="contractFrom"
                            label="合同来源"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                            width="150">
                    </el-table-column>

                    <el-table-column
                            label="操作">
                        <el-button style="float:left; padding: 3px 0" type="text"
                                   @change=qa_view()>查看</el-button>
                        <el-button style="float: left; padding: 3px 0" type="text"
                                   @change=qa_download()>下载</el-button>
                    </el-table-column>
                </el-table>
            </template>
            <template>
                <div class="block">
                    <!-- size-change绑定的是每页显示数量变化时执行的方法，
                     current-change绑定的是翻页时执行的方法，
                     page-sizes属性中的数组是 “每页显示多少条” 下拉框中的数据，
                     page-size属性时当前显示条数，
                     layout是翻页控件的布局顺序，
                     total绑定的是总共多少条数据-->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </template>
        </el-card>
    </div>
</div>

<script th:inline="javascript">
    let app = new Vue({
        el:'#main',
        data:{
            //表格数据
            tableData:[],
            //总条数
            pageSize:10,
            //当前页
            currentPage:1,
            total:0,
            formInline: {
                contractNo: '',
                userName: '',
                time:''
            },

            num:'',
            nums7:'',
            num30:'',
            numAll:'',

            /*合同搜索弹框*/
            form: {
                id:'',
                name: '',
                status:'',
                from:'',
                tktime:''
            },
            /*日期*/
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },

            value:'',

            /*弹框*/
            dialogFormVisible: false,
            formLabelWidth: '100px'
        },
        methods:{
            //向后端发起请求，加载表格内容，传的参数是当前查第几页
            getData(val){
                axios.get([[@{qainfor/page}]],{
                    params:{
                        //每页多少条
                        limit:this.pageSize,
                            //从什么地方开始查
                            offSet:0,
                            //当前查第几页
                            pageNum:val,
                            //排序字段和排序方式
                            sort:"create_time",
                            sortOrder:"desc",
                        //要传属性的继续写在下面
                        contractNo:this.formInline.contractNo,
                        userName:this.formInline.userName,
                        id:this.form.id,
                        name:this.form.name,
                        status:this.form.status,
                        from:this.form.from,
                        tkTime:this.form.tkTime

                    }
                }).then(res => {
                    //将查询到的数据赋给表格中绑定的变量
                    this.total = res.data.total;
                    this.tableData = res.data.rows;
                    for(let i = 0 ;i<this.tableData.length;i++){
                        if(this.tableData[i].status === 0){
                            this.tableData[i].status = true;
                        }
                    }
                }).catch(error => {
                    console.log(error);
                })
            },
            //改变每页显示数据条数时执行的方法
            handleSizeChange(val){
                this.pageSize=val;
                this.currentPage=1;
                this.getData(this.currentPage);
            },
            //翻页时执行的方法
            handleCurrentChange(val) {
                this.currentPage=val;
                this.getData(this.currentPage);
            },

            //点击弹出模态框
            search1(){
                this.dialogFormVisible = true;
            },
            contract_search1(){
                this.getData(1);
                this.form.id='';
                this.form.name='';
                this.form.status='';
                this.form.from='';
                this.form.tkTime='';
                this.dialogFormVisible = false;
            },


            change:function(index,row){
                console.log(index,row);
            },
            //表单提交
            onSubmit() {
                axios.get([[@{qainfor/page}]],{
                    params:{
                        //每页多少条
                        limit:this.pageSize,
                            //从什么地方开始查
                            offSet:0,
                            //当前查第几页
                            pageNum:1,
                            //排序字段和排序方式
                            sort:"create_time",
                            sortOrder:"desc",
                            //要传属性的继续写在下面
                            qaText1:this.formInline.qa_text1,
                            qaText2:this.formInline.qa_text2
                    }
                }).then(res => {
                    //将查询到的数据赋给表格中绑定的变量
                    this.total = res.data.total;
                    this.tableData = res.data.rows;
                    for(let i = 0 ;i<this.tableData.length;i++){
                        if(this.tableData[i].status === 0){
                            this.tableData[i].status = true;
                        }
                    }
                }).catch(error => {
                    console.log(error);
                })
            }
        },
        //创建时执行查询，查第一页
        created : function () {
            this.getData(1);
        }
    })
    let app3 = new Vue({
        el:"#top"
    })


</script>
</body>
</html>